<template>
  <div>
    <div class="clear-float">
      <div class="btn-add-container">
        <button class="btn-add" type="button" @click="handleClick">添加</button>
      </div>
      <div class="todo-content">
        <input class="todo-content-input" v-model="inputContent" placeholder="请在这里输入Item" />
      </div>
    </div>
    <div class="todo-list-item-container">
      <div v-if="item.length>0">
        <todo-list-item
          :style="index===0?'':'margin-top:20px'"
          v-for="(obj,index) in item"
          :key="obj.timestamp"
          :content="obj.content"
          :index="index"
        ></todo-list-item>
      </div>
      <div class="no-content" v-else>无内容</div>
    </div>
  </div>
</template>

<script>
import TodoListItem from "@/components/TodoListItem.vue";
export default {
  name: "TodoList",
  props: ["item"],
  components: {
    TodoListItem
  },
  data() {
    return {
      inputContent: ""
    };
  },
  methods: {
    handleClick() {
      if (this.inputContent !== "") {
        this.$emit("addItem", this.inputContent);
        this.inputContent = "";
      }
    }
  }
};
</script>

<style>
.clear-float {
  margin-right: 30px;
}
.clear-float::after {
  clear: both;
}
.btn-add {
  background: lightgray;
  border: 1px solid black;
  font-size: 1.3em;
  padding: 5px 20px;
}
.todo-content {
  overflow: hidden;
  padding: 0 30px;
}
.todo-content-input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid black;
  font-size: 1.2em;
  outline: none;
  padding: 10px;
}
.btn-add-container {
  margin: 0 auto;
  float: right;
}
.btn-add:active {
  background: gray;
}
.todo-list-item-container {
  margin-top: 20px;
}
.no-content {
  font-size: 40px;
  margin-top: 100px;
  color: gray;
}
</style>